<script lang="ts" setup name="friend">
import TitleBar from '../../../components/TitleBar.vue'
import UserListItem from '../../../components/UserListItem.vue'
import { ref, onActivated, computed } from 'vue'
import { Search } from '@vicons/ionicons5'
import { PersonAddOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'
import { UserInterface } from '@renderer/types'
import { requestGet, requestPost } from '@renderer/utils/commonRequest'
import { useUserInfoStore } from '@renderer/store/useUserInfo.store'
import { useUserApproveStore } from '@renderer/store/userApproveList.store'
import { useFriendListStore } from '@renderer/store/useFriendList.store'
const router = useRouter()

const search = ref<string>('')

const friendListStore = useFriendListStore()

const selectUser = ref<UserInterface | undefined>()

const idActiveisNewUser = ref<boolean>(false)

const newUserClick = (): void => {
  idActiveisNewUser.value = true
  selectUser.value = undefined
}

const userClick = (data: UserInterface): void => {
  idActiveisNewUser.value = false
  selectUser.value = data
}

const getUserApproveList = computed(() => useUserApproveStore().getUserApproveList)

const friendList = computed(() => useFriendListStore().getUserList)

const getFriendList = async (): Promise<void> => {
  const userInfoStore = useUserInfoStore()
  const userId = userInfoStore.getUserInfo?.id
  const data = (await requestGet<UserInterface[]>(`friend/${userId}`)) ?? []
  friendListStore.setUserList(data)
}

const sendMessage = (): void => {
  router.push({
    path: '/home/message',
    query: {
      friendId: selectUser.value?.id
    }
  })
}

const addFriendClick = (): void => {
  window.api.createWindow({
    url: '#/addFriend',
    options: {
      title: '添加好友',
      width: 300,
      height: 500
    }
  })
}

// 审批好友
const approveClick = async (id: string, state: number): Promise<void> => {
  const data = await requestPost<boolean>('/friendApplication/agreeFriend', {
    id: id,
    state: state
  })
  if (!data) return
  const result = getUserApproveList.value.map((item) => {
    if (item.id == id) item.state = state
    return item
  })
  useUserApproveStore().setUserApproveList(result)
  window.$message.success('操作成功')
}

onActivated(() => {
  getFriendList()
})
</script>

<template>
  <div class="friend">
    <div class="left">
      <div class="search_box">
        <n-input
          v-model:value="search"
          type="text"
          placeholder="搜索"
          size="small"
          :clearable="true"
        >
          <template #prefix> <n-icon :component="Search" /> </template
        ></n-input>
        <div class="addUser" @click="addFriendClick">
          <n-icon size="15">
            <PersonAddOutline />
          </n-icon>
        </div>
      </div>
      <div class="showFriendBox">
        <n-button strong secondary @click="newUserClick">新的朋友</n-button>
      </div>
      <div class="user_list">
        <n-scrollbar>
          <UserListItem
            v-for="item in friendList"
            :key="item.id"
            :url="item.headPhoto"
            :cet-name="item.cetName"
            :class="{ active: selectUser?.id == item.id }"
            @click="userClick(item)"
          ></UserListItem>
        </n-scrollbar>
      </div>
    </div>
    <div class="right">
      <TitleBar></TitleBar>
      <div v-if="idActiveisNewUser" class="context">
        <div class="user-list">
          <n-scrollbar>
            <UserListItem
              v-for="item in getUserApproveList"
              :key="item.id"
              :url="item.headPhoto"
              :cet-name="item.cetName"
            >
              <template #suffix>
                <div v-if="item.state == 0" class="suffixApprove">
                  <n-button type="success" @click="approveClick(item.id, 1)"> 同意 </n-button>
                  <n-button type="error" @click="approveClick(item.id, 2)"> 拒绝 </n-button>
                </div>
                <n-button v-else-if="item.state == 1" text type="success" class="suffixApprove">
                  已同意
                </n-button>
                <n-button v-else-if="item.state == 2" text type="error" class="suffixApprove">
                  已拒绝
                </n-button>
              </template>
            </UserListItem>
          </n-scrollbar>
        </div>
      </div>
      <div v-else-if="selectUser" class="context">
        <div class="center_box">
          <div class="context">
            <div class="top">
              <n-avatar :size="60" :src="selectUser.headPhoto" />
              <div class="cetBox">
                <div class="cetName">姓名： {{ selectUser.cetName }}</div>
                <div class="sub_title">用户名：{{ selectUser.userName }}</div>
                <div class="sub_title">手机号码：{{ selectUser.mobile }}</div>
              </div>
            </div>
            <n-divider />
            <div class="sub_title e_main">电子邮箱：1426591905@qq.com</div>
            <n-divider />
          </div>
          <div class="box_button">
            <n-button type="success" @click="sendMessage">发送消息</n-button>
          </div>
        </div>
      </div>
      <div v-else class="context">
        <n-empty description="暂无数据"> </n-empty>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.friend {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .left {
    width: 250px;
    border-right: 1px solid #d6d6d6;
    display: flex;
    flex-direction: column;
    .search_box {
      height: 50px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5%;
      .n-input {
        -webkit-app-region: no-drag;
        background-color: #e2e2e2;
        border: none !important;
        &:focus-within {
          background-color: #fff;
        }
      }

      .addUser {
        width: 35px;
        height: 28px;
        background-color: #e2e2e2;
        color: #757575;
        margin-left: 5%;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-app-region: no-drag;
        cursor: pointer;
        &:hover {
          background: #d1d1d1;
        }
      }
    }
    .showFriendBox {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eae8e7;
      .n-button {
        width: 80%;
        -webkit-app-region: no-drag;
      }
    }
    .user_list {
      height: calc(100% - 110px);
      background-color: #eae8e7;
    }
  }
  .right {
    flex: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    background: #f5f5f5;
    .context {
      height: calc(100% - 30px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .user-list {
        height: 100%;
        -webkit-app-region: no-drag;
        width: 100%;

        .suffixApprove {
          width: 120px;
          display: flex;
          font-size: 14px;
          justify-content: center;
        }

        .succese {
          color: #84e92c;
        }
        .error {
          color: #ff4d4f;
        }
      }
      .center_box {
        width: 230px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        user-select: none;
        -webkit-app-region: no-drag;
        .context {
          .top {
            display: flex;
            .cetBox {
              margin-left: 10px;
              .cetName {
                font-size: 14px;
              }
            }
          }
          .sub_title {
            color: #9e9e9e;
            font-size: 12px;
          }
          .e_main {
            font-size: 14px;
          }
        }
        .box_button {
          text-align: center;
          margin: 10px 0;
        }
      }
    }
  }
}
</style>
